<template>
  
    
    <view class="content">
      <view class="app-info">
        <text class="app-name">水滴记</text>
        <text class="version">版本 1.0.0</text>
      </view>
      
      <view class="section">
        <view class="section-header">
          <view class="blue-bar"></view>
          <text>应用介绍</text>
        </view>
        <view class="section-body">
          <text class="desc-text">"水滴记"是一款集待办事项、心愿清单和成就记录于一体的多功能个人管理应用。</text>
          <text class="desc-text">它帮助您规划日常任务、记录美好心愿、追踪个人成就，让生活更有条理和成就感。</text>
        </view>
      </view>
      
      <view class="section">
        <view class="section-header">
          <view class="blue-bar"></view>
          <text>功能特点</text>
        </view>
        <view class="feature-grid">
          <view class="feature-item">
            <u-icon name="checkbox-mark" color="#4080ff" size="48"></u-icon>
            <text>多类待办管理</text>
          </view>
          <view class="feature-item">
            <u-icon name="star" color="#4080ff" size="48"></u-icon>
            <text>心愿清单记录</text>
          </view>
          <!-- <view class="feature-item">
            <u-icon name="medal" color="#4080ff" size="48"></u-icon>
            <text>成就系统</text>
          </view> -->
          <view class="feature-item">
            <u-icon name="calendar" color="#4080ff" size="48"></u-icon>
            <text>日历视图</text>
          </view>
          <view class="feature-item">
            <u-icon name="bell" color="#4080ff" size="48"></u-icon>
            <text>提醒通知</text>
          </view>
          <!-- <view class="feature-item">
            <u-icon name="cloud-upload" color="#4080ff" size="48"></u-icon>
            <text>云端同步</text>
          </view> -->
        </view>
      </view>
      
      <view class="section">
        <view class="section-header">
          <view class="blue-bar"></view>
          <text>联系我们</text>
        </view>
        <view class="contact-item" @click="copyText('support@notebook.com')">
          <u-icon name="email" color="#4080ff" size="36"></u-icon>
          <text>2987815891@qq.com</text>
        </view>
        <!-- <view class="contact-item" @click="copyText('notebook_official')">
          <u-icon name="weixin-circle" color="#4080ff" size="36"></u-icon>
          <text>notebook_official</text>
        </view> -->
      </view>
      
      <view class="footer">
        <view class="link-row">
          <text @click="navTo('/pages/user/agreement?type=user')">用户协议</text>
          <text @click="navTo('/pages/user/agreement?type=privacy')">隐私政策</text>
        </view>
        <text class="copyright">Copyright © 2025 水滴记 All Rights Reserved</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 复制文本
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: '已复制到剪贴板',
            icon: 'success'
          })
        }
      })
    },
    
    // 页面导航
    navTo(url) {
      uni.navigateTo({ url })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #ffffff;
  min-height: 100vh;
}

.header {
  position: relative;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  background-color: #f8f8f8;
}

.left-area {
  position: absolute;
  left: 30rpx;
  height: 100%;
  display: flex;
  align-items: center;
}

.right-area {
  position: absolute;
  right: 30rpx;
  height: 100%;
  display: flex;
  align-items: center;
}

.title {
  font-size: 36rpx;
  font-weight: normal;
}

.content {
  padding: 0 30rpx;
}

.app-info {
  padding: 80rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.app-name {
  font-size: 42rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.version {
  font-size: 28rpx;
  color: #999;
}

.section {
  margin-bottom: 40rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.blue-bar {
  width: 8rpx;
  height: 32rpx;
  background-color: #4080ff;
  margin-right: 16rpx;
  border-radius: 4rpx;
}

.section-header text {
  font-size: 32rpx;
  font-weight: normal;
}

.section-body {
  padding: 0 24rpx;
}

.desc-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: block;
  margin-bottom: 12rpx;
}

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 0;
}

.feature-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.feature-item text {
  font-size: 26rpx;
  color: #666;
  margin-top: 10rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 0 24rpx;
}

.contact-item text {
  font-size: 28rpx;
  color: #666;
  margin-left: 16rpx;
}

.footer {
  padding: 40rpx 0;
  text-align: center;
}

.link-row {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.link-row text {
  font-size: 28rpx;
  color: #666;
  padding: 0 20rpx;
  position: relative;
}

.link-row text:first-child:after {
  content: '|';
  position: absolute;
  right: 0;
  color: #ddd;
}

.copyright {
  font-size: 24rpx;
  color: #999;
}
</style> 